<template>
    <div>
        <!-- 该文件是首页--echarts图标模块 -->
        <div class="homeEcharts_wrap">
                <div class="echarts_left">
                    <bar title="统计" :x-arr="['管理员人数','学员人数','课程数量','视频数量']" :bar-data="barArr"></bar>
                </div>
                <div class="echarts_right">
                    <pie title="统计" :pie-data="pieData"></pie>
                </div>
        </div>
    </div>
</template>

<script>
import bar from '@/views/echarts/bar'
import pie from '@/views/echarts/pie'
//引入接口
import {_getAdmin} from '@/api/admin.js'
import {_getStudent} from '@/api/student.js'
import {_getCourseList}from '@/api/courseList.js'
import {_getVideoList} from '@/api/video.js'
    export default {
        data(){
            return{
                barData:[],
                adminNum:0,//管理员人数
                studentNum:0,//学员人数
                courseNum:0,//课程数量
                videoNum:0,//视频数量
                barArr:[],//柱状图渲染的数据
                pieData:[]//饼状图渲染的数据
            }
        },
        components:{
            bar,
            pie
        },
        mounted(){
            //获取管理员人数
            this.getAdmin()
        },
        methods:{
            
            async getAdmin(){
                //获取管理员人数
                var res = await _getAdmin({
                    pageStart:1
                })
                console.log(res)
                this.adminNum = res.data.data.count
                this.$set(this.barArr,0,this.adminNum)
                this.pieData.push({
                    value:this.adminNum,
                    name:'管理员人数'
                })

                //获取学员人数
                var stuRes = await _getStudent({
                    pageStart:1
                })
                console.log(stuRes)
                this.studentNum = stuRes.data.data.count
                this.$set(this.barArr,1,this.studentNum)
                this.pieData.push({
                    value:this.studentNum,
                    name:'学员人数'
                })

                //获取课程数量
                var courseRes = await _getCourseList({
                    pageStart:1
                })
                console.log(courseRes)
                this.courseNum = courseRes.data.data.count
                this.$set(this.barArr,2,this.courseNum)
                this.pieData.push({
                    value:this.courseNum,
                    name:'课程数量'
                })

                //获取视频的数量
                var vidRes = await _getVideoList({
                    pageStart:1
                })
                console.log(vidRes)
                this.videoNum = vidRes.data.data.count
                this.$set(this.barArr,3,this.videoNum)
                this.pieData.push({
                    value:this.videoNum,
                    name:'视频数量'
                })

                console.log(this.barArr)

            }
        }
    }
</script>

<style lang="less" scoped>
.homeEcharts_wrap{
    width: 90%;
    height: 310px;
    overflow: hidden;
    margin:0 auto;
    background-color: #988fa681;
    margin-top:10px;
    display:flex;
    align-items: center;
    justify-content: space-between;
    .echarts_left{
        width: 50%;
        height: 100%;
        // background-color: aqua;
    }
    .echarts_right{
        width: 50%;
        height: 100%;
        // background-color: brown;
    }
}
</style>